/* Bg #00ABA9

/*
 * reg white-space:

 border 303030
 hover : #111

 */

@win8bg: #00ABA9;
@win8border: #303030;
@-ms-viewport{
  width: device-width;
}
@font-face {
  font-family: 'win8back';
  src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AAARUAAsAAAAABmgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAS4AAAGZpdvO1kZGVE0AAAI4AAAAGgAAABxnmGDwR0RFRgAAAlQAAAAdAAAAIAAwAARPUy8yAAACdAAAAEsAAABgL9zcQGNtYXAAAALAAAAAOgAAAVLgE/LMaGVhZAAAAvwAAAAuAAAANvx5/t1oaGVhAAADLAAAAB4AAAAkBBD/5GhtdHgAAANMAAAADAAAAAwEAAACbWF4cAAAA1gAAAAGAAAABgADUABuYW1lAAADYAAAAOgAAAGPgxEkPHBvc3QAAARIAAAADAAAACAAAwAAeJxtTj1PAkEUnD0WQbwAEomYnEdlDxbGQu0Ua+2sULFAEhIEY0WiNJisITE5G2lo6Iw1/gULKxMTSypLCz+2UMe7A6+ymTczb2bfCkgJIcTkSbm6vLe7X4EwILCm5w1th3RGKjOkTGnHMLedolIBMSOqoh3dCFtoJSwgaaE9bSFqicsUpPdGFAnMIntcLa/ncjl3bLjj70xwDhBtcY6Q1zDwIRD/dPRRmrgo3BK1wRbZcRnrHqsH8h/PD49qQTfwsvyxTyGJZt8mDp6HY/Bls18krxf8RY9s7Qw96HlecQy+9BajiB92a1nyceWGYuL7zf3yw5RB3oWeyPz72QRxeL9KXi1Jstt9UWRtkCQ6m3kXCq8eWyRKpYwKx5VuyC9HO5G4dmZUWpmxXzJhtKEAAHicY2BgYGQAgjO2i86D6LNr4wVgNABJKQZOAAB4nGNgZGBg4ANiCQYQYGJgBEIQyQLmMQAABGAANQAAAHicY2BmYmCcwMDKwMHow5jGwMDgDqW/MkgytDAwMDGwMjPAgQCCyRCQ5prC4PCA4QMD44P/Dxj0GB8wKDQwMDDCFSgAISMAEEIMHwB4nGNgYGBmgGAZBkYGEPAB8hjBfBYGAyDNAYRMIIkHDB8Y/v9HZikwCjBBdYEBIxsDMndEAgDJXAiuAAB4nGNgZGBgAGK+Bx4V8fw2Xxm4mRhA4OzaeAEE/f8BEwPjAyCXgwEsDQAU3gn7AAB4nGNgZGBgfPD/AYMeEwMDwz8GIAkUQQHMAG3nA/YAAAIAAAACAAACAAAAAAAAUAAAAwAAeJx9jjFOw0AQRZ8TJ4BACFHQ0KxEiWzZRomiHMAHSJHeiVaWRWRLm0QpuActZ6DlGByAM3AEvsPQUGSl0b79+2fmA1e8EtGfiHNujQec8Wg85IEX41ied+MRl3waj6V/yxnFF1Jujl09D7jm3nhIyZNxLM+b8Yg7PozH0r840NAyY0XFmmc4NO1sVa1FCzw1ezb6Cnr6er+pBCWdWnbHO8jhcRSkZLrnqv8jf9UpCRNVIV+ucJRduyu7UHtXpJmbu7/FwmkySYosl+lEvKUWB7Yy9HGchvYRWPqwbbrW5Wl2qv0H0Z06yHicY2BmwAsAAH0ABA==) format('woff'),
     url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTWeYYPAAAAWMAAAAHEdERUYAMgAGAAAFbAAAACBPUy8yL7rcHwAAAVgAAABWY21hcOAV89MAAAHEAAABUmdhc3D//wADAAAFZAAAAAhnbHlmEDC/5gAAAyQAAAB0aGVhZPx5/t0AAADcAAAANmhoZWEEEP/mAAABFAAAACRobXR4BKoAAgAAAbAAAAAUbG9jYQAsADoAAAMYAAAADG1heHAASgAcAAABOAAAACBuYW1lgxEkPAAAA5gAAAGPcG9zdJtVPjcAAAUoAAAAPAABAAAAAQAAWPDPKV8PPPUACwIAAAAAAM2tXxAAAAAAza1fEAAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AALgIAAAD+AAIAAAEAAAAAAAAAAAAAAAAAAAAFAAEAAAAFABkAAwAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQMAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4ADwAAHg/+AALgHgACCAAAABAAAAAAAAAgAAAAAAAAAAqgAAAgAAAgAAAAAAAAADAAAAAwAAABwAAQAAAAAATAADAAEAAAAcAAQAMAAAAAgACAACAAAAAOAA8AD//wAAAADgAPAA//8AACADEAQAAQAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALAA6AAMAAv/iAf4B3gAHAA8AGAAAACIGFBYyNjQCIiY0NjIWFCU3IwcXMyczNQFp0pWV0pWgvIaGvIb+8Gtkj49ka84B3pXSlZXS/rOGvIaGvIFrjo5rRgAAAAABAAD/4AIAAeAAAgAAEQEhAgD+AAHg/gAAAAAAAAAMAJYAAQAAAAAAAQAIABIAAQAAAAAAAgAHACsAAQAAAAAAAwAjAHsAAQAAAAAABAAIALEAAQAAAAAABQALANIAAQAAAAAABgAIAPAAAwABBAkAAQAQAAAAAwABBAkAAgAOABsAAwABBAkAAwBGADMAAwABBAkABAAQAJ8AAwABBAkABQAWALoAAwABBAkABgAQAN4AdwBpAG4AOABiAGEAYwBrAAB3aW44YmFjawAAUgBlAGcAdQBsAGEAcgAAUmVndWxhcgAARgBvAG4AdABGAG8AcgBnAGUAIAAyAC4AMAAgADoAIAB3AGkAbgA4AGIAYQBjAGsAIAA6ACAANgAtADUALQAyADAAMQAzAABGb250Rm9yZ2UgMi4wIDogd2luOGJhY2sgOiA2LTUtMjAxMwAAdwBpAG4AOABiAGEAYwBrAAB3aW44YmFjawAAVgBlAHIAcwBpAG8AbgAgADEALgAwAABWZXJzaW9uIDEuMAAAdwBpAG4AOABiAGEAYwBrAAB3aW44YmFjawAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQAAAAEAAgECAQMHdW5pRTAwMAd1bmlGMDAwAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAEAAEABAAAAAIAAAAAAAEAAAAAzD2izwAAAADNrV8QAAAAAM2tXxA=) format('truetype');
  font-weight: normal;
  font-style: normal;
}

.win8, .win8 .view, .win8 .view .pages {
    font:14px  "Segoe UI Semilight", "HelveticaNeue-light", Helvetica, Arial, sans-serif;
    font-size:14px;
    background:#000;
    color:#fff;
}
.win8.light, .win8.light .view, .win8.light .view .pages {
    background:#fff;
    color:#000;
}
.win8 {
    .view {
        header {
            border:0px;
            background: inherit;
            border-bottom:inherit;
            color:inherit;
            .button {
                color: inherit;
                border-color:transparent;
                font-size:14px;
            }
            .backButton.pressed {
                background:inherit;
            }
            .backButton {
                color:inherit;
                background:inherit;
                margin:0;
                font-family: 'win8back';
                width:0px;
                height:0px;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                padding:0px;
                margin:0px;
                border:none;
                position:absolute;
                left:-185px;
                -webkit-font-smoothing: antialiased;
            }
            .backButton::before {
                content: "\e000";
                font-size:30px;
                position:absolute;
                top:-6px;
                right:-235px;
                left:auto;
                color:inherit;
                font-family:inherit;
                -webkit-transform:none;
                transform:none;
            }
            h1 {
                text-align: left;
                color:inherit;
            }
        }
        footer {
            padding:0px;
            background:inherit;
            text-align: center;
            height:65px;
            background:rgba(33,32,33,.9);
            border-top:none;
            display:block;
            text-align: center;
            & > a:not(.button) {
                text-align: center;
                position: relative;
                width: 56px !important;
                height: 65px;
                display: inline-block;
                font: normal 10px/24px Segoe WP, Segoe UI, Verdana, Helvetica, Sans-Serif;
                text-decoration: none;
                color: inherit;
                text-align: center;
                text-shadow: 0 0 rgba(0, 0, 0, 0);
                overflow: hidden;
                background:inherit;
                -webkit-backface-visibility: hidden;
                -webkit-perspective: 1000;
            }
            & > a.icon.pressed:not(.button):before {
                background-color: @win8bg;
            }
            & > a.icon:not(.button):before {
                width:35px;
                top: 4px;
                left:2px;
                font-size:19px;
                padding: 5px;
                border: 3px solid #fff;
                border-radius: 20px;
            }
            & > a:not(:last-of-type):not(.button) {
                border:none;
            }
        }
        .panel {
            background:inherit;
            color:inherit;
        }
    }
    .af-badge {
        border:none;
    }
    .list {
        background:inherit;
        color:inherit;
        border-color:@win8border;
        li {
            border-top:none;
            border-bottom:none;
            font-size:20px;
        }
    }
    .panel {
        h2 {
            color:inherit;
            font-weight:normal;
            font-size:34px;
            line-height:34px;
            height:auto;
        }
    }
    .collapsed:after {
        border-top: 6px solid;
    }
    .collapsed:before {
        border:2px solid;
    }
    .expanded:after {
        border-bottom: 6px solid;
    }
    .expanded:before {
        border:2px solid;
    }
    input.toggle+label:after {
        color:inherit;
    }
    input.toggle+label {
        border-radius:0;
        & > span {
            border-radius:0;
            top:0;
            width:27px;
            height:28px;
        }
    }
    input.toggle:checked+label {
        background:@win8bg;
    }
    .button {
        border-radius:0;
        border:none;
        background:inherit;
        border:3px solid #fff;
        color:inherit;
        text-shadow:none;
        box-shadow:none;
    }
    .button.pressed {
        background:@win8bg;
    }
    .button-grouped {
        & > .button {
            border:3px solid #fff;
            border-right:0;
        }
        & > .button:last-child {
            border-right:3px solid #fff;
        }
    }
    .button-grouped.vertical {
        & > .button {
            border:3px solid #fff;
            border-bottom:0;
        }
        & > .button:last-child {
            border-bottom:3px solid #fff;
        }
    }
    .header {
        .button-grouped {
            & > .button {
                border-color: #fff;
            }
            & > .button.pressed {
                background:@win8bg;
            }
        }
    }
    .afPopup {
        width: 100%;
        border: solid 0px #72767b;
        left:0px !important;
        border-radius: 0;
        -webkit-transform:none;
        transform:none;
        -webkit-transition: none;
        transition:none;
        top: 0 !important;
        background:#222;
        color:inherit;
        padding:15px;
        & > HEADER {
            font-size:20px;
        }
        & > DIV {
            font-size:16px;
            padding:10px 0;
            margin:0;
        }
        & > FOOTER {
            width:100%;
            text-align:left;
            display:block !important;
            & > A#cancel {
                float:left;
                min-width:100px;
            }
            & > A#action {
                float:left;
                min-width:100px;
                margin-left:10px;
            }
            & > A.center {
                width:auto;
            }
        }
    }
    #af_actionsheet {
        background:#aaa;
        color:black;
        a {
            border-radius:0;
            border:0px solid black;
            background-color:transparent;
            font-weight:normal;
            color:black;
            box-shadow: 0px 1px 1px rgba(255,255,255,0);
        }
    }
    input[type="range"] {
        -webkit-appearance: none;
        -webkit-appearance: none;
        background-color: #ccc;
        height: 4px;
        position: relative;
        top: -10px;
        margin-top: 15px;
    }
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        position: relative;
        z-index: 1;
        width: 15px;
        height: 15px;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#ccc));
        background-image: gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#ccc));
    }
}
.win8.light {
    .view {
        footer {
            background:#F2F2F2;
            color:black;
            display:block;
            & > a:not(.button) {
                text-shadow: 0 0 rgba(0, 0, 0, 0);
            }
            & > a.icon:not(.button):before {
                border: 3px solid #000;
            }
        }
    }
    .button {
        border:3px solid #000;
    }
    .afPopup {
        background:#eee;
    }
}
.win8 .list .divider,  .win8 #menu.tabletMenu .list .divider {
    background:@win8bg;
    padding:5px;
    display:inline;
    font-size:16px;
    font-weight:normal;
    border-top:none;
    border-bottom:none;
    color:inherit;
}
.win8 .collapsed:before,.win8 .expanded:before {
    border-color: inherit;
}
.win8 .collapsed:after,.win8 .expanded:after {
    border-top-color:inherit;
    border-top-color:inherit;
}
.win8 select, .win8 textarea, .win8 input[type="text"], .win8 input[type="search"], .win8 input[type="password"], .win8 input[type="datetime"], .win8 input[type="datetime-local"], .win8 input[type="date"], .win8 input[type="month"], .win8 input[type="time"], .win8 input[type="week"], .win8 input[type="number"], .win8 input[type="email"], .win8 input[type="url"], .win8 input[type="tel"], .win8 input[type="color"], .win8 .input-group {
    background:black;
    color:inherit;
}
.win8.light select, .win8.light textarea, .win8.light input[type="text"], .win8.light input[type="search"], .win8.light input[type="password"], .win8.light input[type="datetime"], .win8.light input[type="datetime-local"], .win8.light input[type="date"], .win8.light input[type="month"], .win8.light input[type="time"], .win8.light input[type="week"], .win8.light input[type="number"], .win8.light input[type="email"], .win8.light input[type="url"], .win8.light input[type="tel"], .win8.light input[type="color"], .win8.light .input-group {
    background:white;
}
.win8 .button.next, .win8 .button.previous {
    border-color: #fff !important;
}
.win8 .button.next::after, .win8 .button.previous::after {
    border:none;
}
.win8 .button-grouped &>.button:first-child,.win8 .button-grouped &>.button:last-child {
    border-radius:0;
}
.win8.light .button-grouped &>.button,.win8.light .button-grouped.vertical &>.button,.win8.light .header .button-grouped &>.button {
    border-color: #111;
}

.win8 input[type="radio"]:not(.toggle):checked+label:before,.win8 input[type="checkbox"]:not(.toggle):checked+label:before {
    background: @win8bg;
}

